<!--
  ~ Copyright (c) 2016. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  ~ Morbi non lorem porttitor neque feugiat blandit. Ut vitae ipsum eget quam lacinia accumsan.
  ~ Etiam sed turpis ac ipsum condimentum fringilla. Maecenas magna.
  ~ Proin dapibus sapien vel ante. Aliquam erat volutpat. Pellentesque sagittis ligula eget metus.
  ~ Vestibulum commodo. Ut rhoncus gravida arcu.
  -->

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html {
	width: 100%;
	height: 100%;
	margin: 0;
	font-family: "微软雅黑";
	padding: 0
}

#l-map {
	height: 70%;
	width: 100%;
	float: left;
	position: relative;
	z-index: 19
}
</style>
<script type="text/javascript"
	src="http://api.map.baidu.com/api?v=2.0&ak=*******LPbBT58lQwWcsxS7slV"></script>
<script type="text/javascript"
	src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet"
	href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
<title>鞋柜旗下门店</title>
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">
</head>
<body bgcolor="#CCCCCC">
<div class="container-fluid"  style="padding-left: 5px; padding-right: 5px;">
  <div class="row-fluid"  style="margin: 0px;padding: 0px " >
    <div class="span12" style="margin: 0px;padding: 0px "  >
    <!--  <div class=""  style="padding-bottom: 0px;padding-top: 0px;margin-top: 0px;">
        <h4> 
		 <span >附近门店信息</span>
          <div class="graddress pull-right" >
		  <div id="city" class="pull-right" >
		  </div>
		  </div>
         </h4>
      </div> -->
      
      	  <!-- add by dropdown -menu -->
	  
      
      <nav class="navbar navbar-inverse" role="navigation" style="margin-bottom: 0px;">
   <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" 
         data-target="#example-navbar-collapse" >
         <span class="sr-only">切换导航</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">附近门店信息</a>
      
   </div>

   <div class="collapse navbar-collapse  pull-right" id="example-navbar-collapse">
      <ul class="nav navbar-nav">
         <!--<li class="dropdown ">-->
            <!--<a href="#" class="dropdown-toggle" data-toggle="dropdown">-->
               <!--距离 <b class="caret"></b>-->
            <!--</a>-->
           <!--<ul class="dropdown-menu">-->
										<li>
											<a href="javascript:void(0)" onclick="javascript:getLocation(10000);">&lt;10公里</a>
										</li>
										<li>
											<a href="javascript:void(0)" onclick="javascript:getLocation(25000);">&lt;25公里</a>
										</li>
										<li>
											<a href="javascript:void(0)" onclick="javascript:getLocation(50000);"> &lt;50公里</a>
										</li>
										<li class="divider">
										</li>
										<li>
											<a href="javascript:void(0)" onclick="javascript:getLocation(100000);">显示更多信息</a>
										</li>
									<!--</ul>-->
         <!--</li>-->
      </ul>
   </div>
</nav>
      

<!-- add by end dropdown menu -->

      <div class="tabbable" id="tabs-264876">
        <ul class="nav nav-tabs">
          <li class="active" id="listMeun" style="width:50%"><a href="#panel-566788" data-toggle="tab"><div align="center" style="font-size: 14px"><strong>列表内容</strong></div></a> </li>
        
		  <li onClick="" style="width:50%"> <a href="#panel-255448" data-toggle="tab"  id="mapMeun"><div align="center"  style="font-size: 14px"><strong>地图显示</strong></div></a> </li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane active" id="panel-566788">
            <div class="panel panel-default" style="background-color:#CCCCCC">
              <!--<div class="panel-heading">
                <h3 class="panel-title" contenteditable="true">fu</h3>
              </div>-->
              <div class="panel-body" id="storeList" contenteditable="true" >
               正在加载门店信息.......
              </div> 
              <div class="panel-footer" contenteditable="true">鞋柜</div>
            </div>
          </div>
          <div class="tab-pane" id="panel-255448" >
            <div class="container-fluid" style="padding-left: 0px; padding-right: 0px;">
              <div class="row-fluid" >
                <div class="span12" >
                  <div class="panel panel-default" style="padding-left: 0px;">
                    <div class="panel-body"  style="padding: 0px;">
                      <div class="container-fluid"  style="padding-left: 0px;">
                        <ul class="nav nav-tabs" id="nav">
                          <li class="active"><a class="#" onClick="changeModel('walking')">步行</a></li>
                          <li><a class="#" onClick="changeModel('driving')">驾车</a></li>
                          <li><a class="#" onClick="changeModel('bus')">公交</a></li>
                          <li class=" pull-right"><a href="#" onClick="getLocation()">我的位置</a></li>
                        </ul>
                      </div>
                      <div class="container-fluid">
                        <div class="row" id="map_test">
                          <div class="col-xs-12 col-md-8"  style="padding-left: 0px; padding-right: 0px;">
                            <div id="l-map"></div>
                          </div>
                          <div class="col-xs-12 col-md-4 ">
                            <div id="r-result"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="panel-footer">Panel footer</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<!--<script src="js/jquery.pager.js" type="text/javascript"></script>-->
<script type="text/javascript" src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript">
	var map = new BMap.Map("l-map");
	new BMapLib.SearchInfoWindow(map, content, opts)
	map.addControl(new BMap.NavigationControl());
	map.addControl(new BMap.ScaleControl());
	map.addControl(new BMap.OverviewMapControl());
	map.addControl(new BMap.MapTypeControl());
	var g_model = 'walking', startPoint = new BMap.Point(121.182329, 31.153056), content, localSearch, cityname,scope=50*1000;
	var url = "http://api.map.baidu.com/geosearch/v3/local?callback=?";
	
	//信息窗口信息
	var opts = {
		width : 250, // 信息窗口宽度
		height : 100, // 信息窗口高度
		title : "门店信息", // 信息窗口标题
		enableMessage : true
	//设置允许信息窗发送短息
	};

	//对搜索结果的处理
	var options = {
		renderOptions : {
			map : map
		},
		
		onMarkersSet : function(pois) {
			
			console.log(pois.length);
			pois.sort(function(o1,o2){
				return map.getDistance(startPoint, new BMap.Point(o1.point.lng,o1.point.lat))-map.getDistance(startPoint, new BMap.Point(o2.point.lng,o2.point.lat));
			
			});
			pois
					.forEach(function(p) {

						p.marker.addEventListener('click', openInfo);
						function openInfo(e) {

							var marker = e.target;

							var content = "<p>名称："
									+ marker.getTitle()
									+ "</p><p   class='btn btn-info' onclick='route("
									+ marker.getPosition().lng + ","
									+ marker.getPosition().lat + ")'>到这里去<p>";

							var point = new BMap.Point(
									marker.getPosition().lng, marker
											.getPosition().lat);
							var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
							map.openInfoWindow(infoWindow, point); //开启信息窗口
						}
						//map.addOverlay(e.marker);


	

						var tr = $(
								"<div  class='container-fluid' style='margin-top: 15px; margin-bottom: 15px;border-top-width: 0px; padding-top: 15px; padding-bottom: 15px; background-color:#FFFFFF';> "
								+"<div  class='row'>"
										+" <div class='col-md-12'>"
										+"<p><strong>"
										+ p.title
										+ "</strong></p>"
										+"</div>"
										+"<div class='col-xs-8 col-md-8'>"
										+"<small>"
										+ p.address
										+ "</small>"
										+"</div>"
										+"<div class='col-xs-4 col-md-4' >"
										+"<a href='#'>"
										+"<span class='glyphicon glyphicon-map-marker'></span>"
										+"</a>"
										+"<cite>"
										+ ((map.getDistance(startPoint, p.point))/1000).toFixed(2)
										+ "公里"
										+"</cite>"
										
										+"</div>"
								+"</div>"		
										+"</div>")
								.click(
										function() {

											var content = "<p>名称："
													+ p.title
													+ "</p><p   class='btn btn-info' onclick='route("
													+ p.point.lng + ","
													+ p.point.lat
													+ ")'>到这里去<p>";
													
											var infoWindow = new BMap.InfoWindow(
													content, opts); // 创建信息窗口对象
													
											map.openInfoWindow(infoWindow,
													p.point); //开启信息窗口
											$('#mapMeun').click();
											map.centerAndZoom(startPoint, 15);
							
								<!--$('#listMeun').removeClass('active'); -->
								<!--$('#mapMeun').addClass('active');-->
								<!--window.location.href='#panel-255448';-->
							<!--	window.open("#panel-255448");-->
								
										});
						$('#storeList').append(tr);

					})
					
				
					map.setViewport(startPoint);
					
		},
		pageCapacity : 100
	};
	localSearch = new BMap.LocalSearch(map, options);
	localSearch.disableFirstResultSelection();

	$(document).ready(function() {
		
		if (!cityname) {
			new BMap.LocalCity().get(function(city) {
				cityname = city.name;

				$("#city").text(cityname);
			});
		} else {
			$("#city").text(cityname);
		}
		map.centerAndZoom(startPoint, 15);

		getLocation();

	});

	function getLocation(p_scope) {
		$('#example-navbar-collapse').collapse('hide');
		if(p_scope){
			scope=p_scope;
		}
		var geolocation = new BMap.Geolocation();
		geolocation.getCurrentPosition(function(r) {
			if (this.getStatus() == BMAP_STATUS_SUCCESS) {
				$('#storeList').html("");
				map.clearOverlays();
			
				startPoint = r.point;
				
					var mk = new BMap.Marker(startPoint, {
						// 指定Marker的icon属性为Symbol
						icon : new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
							scale : 1.5,//图标缩放大小
							fillColor : "orange",//填充颜色
							fillOpacity : 0.8
						//填充透明度
						})
					});
					mk.setAnimation(BMAP_ANIMATION_BOUNCE);
					map.addOverlay(mk);
					renderMap();
					
				

				//map.centerAndZoom(r.point, 3);
				//map.panTo(r.point);
			} else {
				$(".graddress").text("无法获取您的当前位置");
				map.setCenter(cityname);
				new BMap.LocalCity().get(function(city) {
					position = city.center;
					positionCenter = position;
				});
			}
		}, {
			enableHighAccuracy : true,
			maximumAge : 0
		});
		//关于状态码
		//BMAP_STATUS_SUCCESS	检索成功。对应数值“0”。
		//BMAP_STATUS_CITY_LIST	城市列表。对应数值“1”。
		//BMAP_STATUS_UNKNOWN_LOCATION	位置结果未知。对应数值“2”。
		//BMAP_STATUS_UNKNOWN_ROUTE	导航结果未知。对应数值“3”。
		//BMAP_STATUS_INVALID_KEY	非法密钥。对应数值“4”。
		//BMAP_STATUS_INVALID_REQUEST	非法请求。对应数值“5”。
		//BMAP_STATUS_PERMISSION_DENIED	没有权限。对应数值“6”。(自 1.1 新增)
		//BMAP_STATUS_SERVICE_UNAVAILABLE	服务不可用。对应数值“7”。(自 1.1 新增)
		//BMAP_STATUS_TIMEOUT	超时。对应数值“8”。(自 1.1 新增)
	}

	function renderMap() {
		
		var circle = new BMap.Circle(startPoint, scope, {
			fillColor : "blue",
			strokeWeight : 1,
			fillOpacity : 0.3,
			strokeOpacity : 0.3
		});
		map.addOverlay(circle);
		localSearch.searchNearby('鞋柜旗下门店', startPoint, scope, {
			renderOptions:{
				map:map,
				
				autoViewport:true,
				selectFirstResult:true
			},
			customData : {
				geotableId : 193530
			}
		});
		
		map.centerAndZoom(startPoint,12);

	}

	function route(lng, lat) {
		map.clearOverlays();
		var ep = new BMap.Point(lng, lat);
		if ('walking' == g_model) {
			walking(ep);
		} else if ('driving' == g_model) {
			driving(ep);
		} else if ('bus' == g_model) {
			bus(ep);
		}

	}
	function walking(ep) {
		var walking = new BMap.WalkingRoute(map, {
			renderOptions : {
				map : map,
				panel : "r-result",
				autoViewport : true,
				enableDragging : true
			}
		});
		walking.search(startPoint, ep);
	}
	function driving(ep) {
		var routePolicy = [ BMAP_DRIVING_POLICY_LEAST_TIME,
				BMAP_DRIVING_POLICY_LEAST_DISTANCE,
				BMAP_DRIVING_POLICY_AVOID_HIGHWAYS ];
		var driving = new BMap.DrivingRoute(map, {
			renderOptions : {
				map : map,
				autoViewport : true,
				panel : 'r-result',
				enableDragging : true
			},
			policy : 0
		});
		driving.search(startPoint, ep);
	}
	function bus(ep) {
		var transit = new BMap.TransitRoute(map, {
			renderOptions : {
				map : map,
				panel : 'r-result',
				enableDragging : true
			},
			policy : 0
		});
		transit.search(startPoint, ep);
	}
	function changeModel(model) {
		map.clearOverlays();

		$("#nav > li").removeClass('active');
		if ('walking' == model) {
			$("#nav > li").eq(0).addClass('active');
			g_model = 'walking';
			getLocation();
			//renderMap();
		} else if ('driving' == model) {
			$("#nav > li").eq(1).addClass('active');
			g_model = 'driving';

			getLocation();
			//renderMap();

		} else if ('bus' == model) {
			$("#nav > li").eq(2).addClass('active');
			g_model = 'bus';
			getLocation();
			//renderMap();
		}
		//$(".dropdown-toggle").text($(".active").text());
		//$(".dropdown-toggle").append("<span class='caret'></span>");
		//$(".dropdown-toggle").prepend($(".active").text());

	}
	
	
</script>
